<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>产品详情</span>
          <div class="right-menu">
            <el-button icon="Back" @click="goBack">返回</el-button>
            <el-button 
              type="primary" 
              icon="Edit" 
              @click="handleEdit" 
              v-hasPermi="['qep:product:edit']"
            >编辑</el-button>
          </div>
        </div>
      </template>

      <el-descriptions title="基本信息" :column="2" border direction="vertical">
        <el-descriptions-item label="产品编码">{{ productInfo.code }}</el-descriptions-item>
        <el-descriptions-item label="产品名称">{{ productInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="产品分类">{{ productInfo.categoryName }}</el-descriptions-item>
        <el-descriptions-item label="产品规格">{{ productInfo.specification }}</el-descriptions-item>
        <el-descriptions-item label="产品材质">{{ productInfo.material }}</el-descriptions-item>
        <el-descriptions-item label="计量单位">{{ productInfo.unit }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="productInfo.status === 1 ? 'success' : 'danger'">
            {{ productInfo.status === 1 ? '正常' : '停用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ productInfo.createTime }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ productInfo.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ productInfo.remark }}</el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="center">技术文档</el-divider>
      
      <el-empty v-if="documentList.length === 0" description="暂无技术文档" />
      <el-row v-else :gutter="20">
        <el-col :span="8" v-for="(doc, index) in documentList" :key="index">
          <el-card shadow="hover" class="document-card">
            <div class="document-item">
              <el-icon :size="30" class="document-icon"><document /></el-icon>
              <div class="document-info">
                <div class="document-name">{{ doc.name }}</div>
                <div class="document-type">{{ doc.type }}</div>
              </div>
              <div class="document-actions">
                <el-button link type="primary" icon="download" @click="downloadDocument(doc)">下载</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-divider content-position="center">工序信息</el-divider>
      
      <el-empty v-if="processList.length === 0" description="暂无工序信息" />
      <div v-else>
        <el-steps :active="processList.length" finish-status="success" simple>
          <el-step 
            v-for="(process, index) in processList" 
            :key="index" 
            :title="process.name" 
            :description="process.description || '无描述'" 
          />
        </el-steps>
        
        <el-table :data="processList" style="margin-top: 20px;">
          <el-table-column label="序号" type="index" width="80" align="center" />
          <el-table-column label="工序编码" prop="code" align="center" />
          <el-table-column label="工序名称" prop="name" align="center" />
          <el-table-column label="工序类型" prop="typeName" align="center" />
          <el-table-column label="标准工时(分钟)" prop="standardTime" align="center" />
          <el-table-column label="工序描述" prop="description" :show-overflow-tooltip="true" />
        </el-table>
      </div>

      <el-divider content-position="center">质量标准</el-divider>
      
      <el-empty v-if="standardList.length === 0" description="暂无质量标准" />
      <el-table v-else :data="standardList">
        <el-table-column label="序号" type="index" width="80" align="center" />
        <el-table-column label="标准编号" prop="code" align="center" />
        <el-table-column label="标准名称" prop="name" align="center" />
        <el-table-column label="标准类型" prop="type" align="center" />
        <el-table-column label="适用条件" prop="condition" :show-overflow-tooltip="true" />
        <el-table-column label="标准值" prop="value" align="center" />
        <el-table-column label="单位" prop="unit" align="center" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getProduct } from "@/api/qep/product";
import { Document } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();
const productInfo = ref({});
const documentList = ref([]);
const processList = ref([]);
const standardList = ref([]);

// 获取产品详情
function getProductDetail(id) {
  getProduct(id).then(response => {
    productInfo.value = response.data || {};
    // 演示数据
    initDemoData();
  });
}

// 为演示目的初始化模拟数据
function initDemoData() {
  // 模拟文档列表
  documentList.value = [
    { id: 1, name: '产品说明书.pdf', type: 'PDF文档', url: '#' },
    { id: 2, name: '技术规格图纸.dwg', type: 'CAD图纸', url: '#' },
    { id: 3, name: '材料清单.xlsx', type: 'Excel表格', url: '#' }
  ];

  // 模拟工序列表
  processList.value = [
    { id: 1, code: 'P001', name: '下料', typeName: '机加工', standardTime: 30, description: '按图纸要求下料' },
    { id: 2, code: 'P002', name: '车削', typeName: '机加工', standardTime: 60, description: '使用车床进行外形加工' },
    { id: 3, code: 'P003', name: '铣削', typeName: '机加工', standardTime: 45, description: '使用铣床进行表面加工' },
    { id: 4, code: 'P004', name: '装配', typeName: '装配', standardTime: 40, description: '组装各部件' },
    { id: 5, code: 'P005', name: '检验', typeName: '质检', standardTime: 20, description: '全面检查产品质量' }
  ];

  // 模拟质量标准列表
  standardList.value = [
    { id: 1, code: 'S001', name: '尺寸公差', type: '物理特性', condition: '常温环境', value: '±0.05', unit: 'mm' },
    { id: 2, code: 'S002', name: '表面粗糙度', type: '物理特性', condition: '常温环境', value: 'Ra1.6', unit: 'μm' },
    { id: 3, code: 'S003', name: '硬度要求', type: '材料特性', condition: '热处理后', value: '40-45', unit: 'HRC' },
    { id: 4, code: 'S004', name: '外观要求', type: '视觉特性', condition: '成品', value: '无明显划痕', unit: '/' }
  ];
}

// 下载文档
function downloadDocument(doc) {
  console.log('下载文档', doc);
  // TODO: 实现文档下载功能
}

// 返回列表页
function goBack() {
  router.go(-1);
}

// 编辑产品
function handleEdit() {
  router.push({ 
    path: '/product/edit', 
    query: { id: route.query.id } 
  });
}

onMounted(() => {
  if (route.query.id) {
    getProductDetail(route.query.id);
  }
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right-menu {
  margin-left: auto;
}

.document-card {
  margin-bottom: 15px;
  cursor: pointer;
}

.document-item {
  display: flex;
  align-items: center;
}

.document-icon {
  margin-right: 15px;
  color: #409EFF;
}

.document-info {
  flex-grow: 1;
}

.document-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.document-type {
  font-size: 12px;
  color: #909399;
}

.document-actions {
  margin-left: 10px;
}

.el-divider {
  margin: 30px 0;
}
</style> 